<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
    <script src="../js/dialog.js"></script>
    <script src="../js/datetimepicker.js"></script>
    <script src="../js/select.js"></script>
    <style>
        span{cursor:pointer;}
    </style>
  </head>
  <body>
    <div>
        <h3>Dialog对话框</h3>
        <p>通过javascript创建对话框。</p>
        <br>

        <h4>默认对话框</h4>
        <section>
            <div class="example">
                <p>注意：对话框只允许同时打开１个。</p>
                <br>
                <a id="btn1" href="javascript: void 0">打开对话框</a>
            </div>
            <pre><code>
    var content = '与我境遇相似或更不如的当不在少数，梨梦湖与西子湖，同是一滴眼泪，给你的颈根与胸膛一半日的自由，对着这不完全，是怨，再也忍不住的你技痒？流，比方说，流入妩媚的阿诺河去……并且你不但不须应伴，也不能给我们利益，但已往的教训，(一九二五年七月)新近有一天晚上，但我不仅不能尽我的责任，不是寡恩，今天已是壮年；昨天腮边还带着圆润的笑涡，一则因为这道是你自愿才来走的，但我们，在这道上遭受的，与他一样，身影似的不可解脱。我猜想，莱因河与扬子江，可以恣尝鲜味，许是怨，谁不曾在他生命的经途中葛德说的和着悲哀吞他的饭，正像是去赴一个美的宴会，比你住久的，你便在旁边乖乖的坐着静听，是贝德花芬是槐格纳你就爱，没福见着你的父亲，也不能给我们利益，与自然同在一个脉搏里跳动，稍稍疏泄我的积愫，你也不必带书。';
    $('#btn1').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content
        });
    });
            </code></pre>
        </section>

        <h4>不带标题的对话框</h4>
        <section>
            <div class="example">
                <a id="btn2" href="javascript: void 0">打开对话框</a>
            </div>
            <pre><code>
    $('#btn2').on('click', function(e) {
        new Dialog({
            content: content
        });
    });
            </code></pre>
        </section>

        <h4>事件</h4>
        <section>
            <div class="example">
                <p>回调函数的第一个参数是实例化的Dialog对象。</p>
                <br>
                <a id="btn3" href="javascript: void 0">打开对话框</a>
            </div>
            <pre><code>
    $('#btn3').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            onOpen: function(dlg) {
                alert('对话框将显示！')
            },
            onOK: function(dlg) {
                alert('你点击了确认按钮！')
            }
        });
    });
            </code></pre>
        </section>

        <h4>没有取消按钮</h4>
        <section>
            <div class="example">
                <p>你可以在回调函数内调用API关闭Dialog。</p>
                <br>
                <div><a id="btn4" href="javascript: void 0">打开对话框</a></div>
            </div>
            <pre><code>
    $('#btn4').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            cancelButton: false,
            onOK: function(dlg) {
                dlg.close();
            }
        });
    });
            </code></pre>
        </section>

        <h4>自定义按钮</h4>
        <section>
            <div class="example">
                <div><a id="btn5" href="javascript: void 0">打开对话框</a></div>
                <br>
                <p>你可以自定义按钮，按如下格式把它们添加到actions数组中。</p>
                <p>Dialog对象会被传给自定义按钮的onClick函数。</p>
            </div>
            <pre><code>
    $('#btn5').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            actions: [{
                tmplt: '&lt;span class="btn btn-primary btn-medium">按钮1&lt;span&gt;',
                onClick: function(dlg) {
                    alert('你点击了按钮1！')
                }
            }, {
                tmplt: '&lt;span class="btn btn-default btn-medium"&gt;按钮2&lt;span&gt;',
                onClick: function(dlg) {
                    alert('你点击了按钮2！')
                }
            }, {
                tmplt: '&lt;span class="btn btn-danger btn-medium"&gt;关闭&lt;span&gt;',
                onClick: function(dlg) {
                    dlg.close()
                }
            }]
        });
    });
            </code></pre>
        </section>

        <h4>内容是HTML</h4>
        <section>
            <div class="example">
                <div><a id="btn6" href="javascript: void 0">打开对话框</a></div>
                <br>
                <p>通过html生成对话框的内容。</p>
                <p>如果对话框中包含其他组件，请在<mark>onOpen()</mark>函数中初始化，通过<mark>dlg.el</mark>访问对话框的jQuery对象。</p>
            </div>
            <pre class="html"><code>    &lt;!-- html --&gt;
    &lt;div id="form" style="display: none"&gt;
        &lt;form class="form" style="margin-left: -25px"&gt;
            &lt;div class="form-row"&gt;
                &lt;label class="form-label col-2"&gt;姓名：&lt;/label&gt;
                &lt;div class="form-control-wrapper col-4"&gt;
                    &lt;input type="text" name="name" class="form-control"&gt;
                &lt;/div&gt;
                &lt;label class="form-label col-2"&gt;邮箱：&lt;/label&gt;
                &lt;div class="form-control-wrapper col-4"&gt;
                    &lt;input type="text" name="email" class="form-control"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-row"&gt;
                &lt;label class="form-label col-2"&gt;生日：&lt;/label&gt;
                &lt;div class="form-control-wrapper col-4"&gt;
                    &lt;input type="text" name="birth" class="form-control"&gt;
                &lt;/div&gt;
                &lt;label class="form-label col-2"&gt;住址：&lt;/label&gt;
                &lt;div class="form-control-wrapper col-4"&gt;
                    &lt;input type="text" name="addr" class="form-control"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;</code></pre>
            <pre><code>    // javascript
    $('#btn6').on('click', function(e) {
        new Dialog({
            title: '标题',
            width: 600,
            content: $('#form').html(),
            onOpen: function(dlg) {
                dlg.el.find('[name=birth]').datetimepicker();
            }
        });
    });</code></pre>
       </section>
    </div>

    <div id="form" style="display: none">
        <form class="form" style="margin-left: -25px">
            <div class="form-row">
                <label class="form-label col-2">姓名：</label>
                <div class="form-control-wrapper col-4">
                    <input type="text" name="name" class="form-control">
                </div>
                <label class="form-label col-2">邮箱：</label>
                <div class="form-control-wrapper col-4">
                    <input type="text" name="email" class="form-control">
                </div>
            </div>
            <div class="form-row">
                <label class="form-label col-2">生日：</label>
                <div class="form-control-wrapper col-4">
                    <input type="text" name="birth" class="form-control">
                </div>
                <label class="form-label col-2">性别：</label>
                <div class="form-control-wrapper col-4">
                    <select name="gender" class="form-control">
                        <option value="m">男</option>
                        <option value="f">女</option>
                    </select>
                </div>
            </div>
          </div>
        </form>
    </div>

    <h4>配置项</h4>
    <table class="table table-bordered doc-table">
        <thead>
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>title</td>
                <td>String</td>
                <td>空</td>
                <td>对话框的标题</td>
            </tr>
            <tr>
                <td>width</td>
                <td>Number/String</td>
                <td>页面宽度的60%</td>
                <td>
                    对话框的宽度。
                    <br>
                    例如：500 或 '500px'。
                </td>
            </tr>
            <tr>
                <td>content</td>
                <td>Html/String</td>
                <td>空</td>
                <td>对话框的内容</td>
            </tr>
            <tr>
                <td>okButton</td>
                <td>Boolean</td>
                <td>true</td>
                <td>是否显示“确认”按钮</td>
            </tr>
            <tr>
                <td>cancelButton</td>
                <td>Boolean</td>
                <td>true</td>
                <td>是否显示“取消”按钮</td>
            </tr>
            <tr>
                <td>actions</td>
                <td>Array</td>
                <td>[]</td>
                <td>
                    自定义对话框的按钮。
                    <br>
                    如何使用参见实例。
                </td>
            </tr>
            <tr>
                <td>onOpen</td>
                <td>Function</td>
                <td>function(dlg) {}</td>
                <td>
                    对话框打开时触发
                    <br>
                    参数：dlg: Dialog对象
                </td>
            </tr>
            <tr>
                <td>onClose</td>
                <td>Function</td>
                <td>function(dlg) {}</td>
                <td>
                    对话框关闭时触发
                    <br>
                    参数：dlg: Dialog对象
                </td>
            </tr>
            <tr>
                <td>onOK</td>
                <td>Function</td>
                <td>function(dlg) {}</td>
                <td>
                    点击“确认”按钮时触发
                    <br>
                    参数：dlg: Dialog对象
                </td>
            </tr>
        </tbody>
    </table>

    <h4>API</h4>
    <table class="table table-bordered doc-table">
        <thead>
            <tr>
                <th>名称</th>
                <th>返回值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>dlg.close()</td>
                <td></td>
                <td>关闭对话框，并销毁。</td>
            </tr>
        </tbody>
    </table>

    <script>
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
    var content = '与我境遇相似或更不如的当不在少数，梨梦湖与西子湖，同是一滴眼泪，给你的颈根与胸膛一半日的自由，对着这不完全，是怨，再也忍不住的你技痒？流，比方说，流入妩媚的阿诺河去……并且你不但不须应伴，也不能给我们利益，但已往的教训，(一九二五年七月)新近有一天晚上，但我不仅不能尽我的责任，不是寡恩，今天已是壮年；昨天腮边还带着圆润的笑涡，一则因为这道是你自愿才来走的，但我们，在这道上遭受的，与他一样，身影似的不可解脱。我猜想，莱因河与扬子江，可以恣尝鲜味，许是怨，谁不曾在他生命的经途中葛德说的和着悲哀吞他的饭，正像是去赴一个美的宴会，比你住久的，你便在旁边乖乖的坐着静听，是贝德花芬是槐格纳你就爱，没福见着你的父亲，也不能给我们利益，与自然同在一个脉搏里跳动，稍稍疏泄我的积愫，你也不必带书。';
    $('#btn1').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content
        });
    });
    $('#btn2').on('click', function(e) {
        new Dialog({
            content: content
        });
    });
    $('#btn3').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            onOpen: function(dlg) {
                alert('对话框将显示！')
            },
            onOK: function(dlg) {
                alert('你点击了确认按钮！')
            }
        });
    });
    $('#btn4').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            cancelButton: false,
            onOK: function(dlg) {
                dlg.close();
            }
        });
    });
    $('#btn5').on('click', function(e) {
        new Dialog({
            title: '标题',
            content: content,
            actions: [{
                tmplt: '<span class="btn btn-primary btn-medium">按钮1<span>',
                onClick: function(dlg) {
                    alert('你点击了按钮1！')
                }
            }, {
                tmplt: '<span class="btn btn-default btn-medium">按钮2<span>',
                onClick: function(dlg) {
                    alert('你点击了按钮2！')
                }
            }, {
                tmplt: '<span class="btn btn-danger btn-medium">关闭<span>',
                onClick: function(dlg) {
                    dlg.close()
                }
            }]
        });
    });
    $('#btn6').on('click', function(e) {
        new Dialog({
            title: '标题',
            width: 600,
            content: $('#form').html(),
            onOpen: function(dlg) {
                dlg.el.find('[name=birth]').datetimepicker();
                dlg.el.find('select').select();
            }
        });
    });
    </script>
  </body>
</html>